$(function () {
  // 1.1去注册点击事件
  $("#link_reg").on("click", function () {
    $(".login-box").hide();
    $(".reg-box").show();
  });

  //1.2 去登录点击事件
  $("#link_login").on("click", function () {
    $(".reg-box").hide();
    $(".login-box").show();
  });

  //2.1 从layui中获取form对象
  var form = layui.form;

  // 3.4 导出layui里面的layer
  var layer = layui.layer;

  //2.2 通过form.verify()函数自定义校验规则
  form.verify({
    // 2.3自定义校验规则
    pwd: [/^[\S]{6,12}$/, "密码必须是6到12位，且不能为空格"],

    // 2.4校验密码是否一致
    repwd: function (value) {
      //形参接收确认密码框中的内容

      // 2.5获取密码框内容
      // 属性选择器
      var pwd = $(".reg-box [name=password]").val();

      //2.6 判断两密码框里的内容是否一致
      if (pwd !== value) {
        return "两次密码不一致";
      }
    },
  });

  // 3.1监听注册表单的提交事件
  $("#form_reg").on("submit", function (e) {
    // 3.2阻止默认的提交行为
    e.preventDefault();
    // 3.3发起Ajax的post注册表单里的用户名和密码
    var data = {
      username: $("#form_reg [name=username]").val(),
      password: $("#form_reg [name=password]").val(),
    };

    $.post("/api/reguser", data, function (res) {
      if (res.status !== 0) {
        //失败
        // return console.log(res.message);
        // 3.5
        return layer.msg(res.message);
      }
      console.log(res);

      // console.log("注册成功");

      // 3.6
      layer.msg("注册成功，请登录");
      // 3.7模拟注册成功去登录

      $("#link_login").click();
    });
  });

  //   4.1监听登录表单的提交的事件
  //   status 请求是否成功 message 请求结果描述信息  token有权限的身份认证
  $("#form_login").submit(function (e) {
    // 4.2阻止默认提交行为
    e.preventDefault();
    // 4.3发送ajax的post请求
    $.ajax({
      url: "/api/login",
      method: "POST",
      // 快速拿到表单里的数据
      data: $(this).serialize(),
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg("登录失败");
        }
        layer.msg("登录成功");
        // console.log(res.token);
        //4.4 将登录成功得到的token字符串 保存到localStorage
        localStorage.setItem("token", res.token);
        //4.5 跳转后台页面
        location.href = "./index1.html";
      },
    });
  });
});
